<template>
  <div>
    <page-banner></page-banner>
    <page-breadcrumbs :crumbData="crumbData"></page-breadcrumbs>
    <div class="page-item">
      <div class="title-box">
        <div class="font-24">区域/渠道代理品牌</div>
        <span class="border-bottom"></span>
      </div>
      <div class="img-box">
        <img class="map-img" src="../../assets/brand_map.png" alt="">
      </div>
    </div>
    <div class="page-item">
      <div class="title-box">
        <div class="font-24">线上合作品牌</div>
        <span class="border-bottom"></span>
      </div>
      <div class="logo-img-box">
        <router-link v-for="(item, index) in onlineBrandData" :key="index" :to="'/brand/detail/' + item.id" class="router-link"><img :src="item.logo" alt="" class="logo"></router-link>
      </div>
    </div>
    <div class="page-item">
      <div class="title-box">
        <div class="font-24">主流平台旗舰店案例</div>
        <span class="border-bottom"></span>
      </div>
      <div class="logo-img-box">
        <router-link v-for="(item, index) in flagShipBrandData" :key="index" :to="'/brand/detail/' + item.id" class="router-link"><img :src="item.logo" alt="" class="logo"></router-link>
      </div>
    </div>
    <div class="page-item">
      <div class="title-box">
        <div class="font-24">线下合作品牌</div>
        <span class="border-bottom"></span>
      </div>
      <div class="logo-img-box">
        <router-link v-for="(item, index) in offlineBrandData" :key="index" :to="'/brand/detail/' + item.id" class="router-link"><img :src="item.logo" alt="" class="logo"></router-link>
      </div>
    </div>
    <page-footer></page-footer>
  </div>
</template>

<script>
import PageBanner from 'components/Banner'
import PageBreadcrumbs from 'components/Breadcrumbs'
import PageFooter from 'components/Footer'
import brand from '@/model/brand'
export default {
  name: 'Brand',
  components: {
    PageBanner,
    PageBreadcrumbs,
    PageFooter
  },
  data () {
    return {
      crumbData: [{
        title: '首页', jump: '/'
      }, {
        title: '合作品牌', jump: ''
      }, {
        title: '品牌列表', jump: '/brand'
      }],
      onlineBrandData: [],
      flagShipBrandData: [],
      offlineBrandData: []
    }
  },
  async created () {
    await this.getOnlineBrands()
    await this.getFlagShipBrands()
    await this.getOfflineBrands()
  },
  methods: {
    async getOnlineBrands () {
      try {
        const condition = { service_cate: '线上合作' }
        const brands = await brand.getBrandsByCondition(condition)
        this.onlineBrandData = brands.data.data
      } catch (error) {
        if (error.code === 10020) {
          this.onlineBrandData = []
        }
      }
    },
    async getFlagShipBrands () {
      try {
        const condition = { is_flagship: 1 }
        const brands = await brand.getBrandsByCondition(condition)
        this.flagShipBrandData = brands.data.data
      } catch (error) {
        if (error.code === 10020) {
          this.onlineBrandData = []
        }
      }
    },
    async getOfflineBrands () {
      try {
        const condition = { service_cate: '线下合作' }
        const brands = await brand.getBrandsByCondition(condition)
        this.offlineBrandData = brands.data.data
      } catch (error) {
        if (error.code === 10020) {
          this.offlineBrandData = []
        }
      }
    },
    brandHandleClick (id) {

    }
  }
}
</script>

<style lang="stylus" scoped>
  @import "~common/stylus/variable.styl"
  .title-box
    margin-top 1rem
    display flex
    flex-direction column
    align-items center
    .font-24
      color $color-blue
    .border-bottom
      padding-top .24rem
      width .32rem
      border-bottom 0.08rem solid $color-blue
  .img-box
    width 90%
    margin .5rem auto
    .map-img
      width 100%
  .logo-img-box
    width 90%
    margin .5rem auto
    display flex
    flex-direction row
    justify-content space-between
    flex-wrap wrap
    .router-link
      width 40%
      .logo
        width 100%
        margin-bottom .5rem
</style>
